<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>可视化布局系统</title>

    <!-- Le styles -->
    <link th:href="@{/ajax/libs/layout/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/layout/css/layoutit.css}" rel="stylesheet"/>

    <script th:src="@{/ajax/libs/layout/js/jquery.min.js}"></script>
    <script th:src="@{/ajax/libs/layout/js/jquery-ui.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <script th:src="@{/ajax/libs/layout/js/jquery.htmlClean.js}"></script>
    <script th:src="@{/ajax/libs/layout/js/scripts.min.js}"></script>
</head>

<body class="edit" style="min-height: 225px;">
<input id="versionId" name="versionId" th:value="${versionId}" type="hidden">
<div class="navbar navbar-inverse navbar-fixed-top navbar-layoutit">
    <div class="navbar-header">
        <button data-target="navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="glyphicon-bar"></span>
            <span class="glyphicon-bar"></span>
            <span class="glyphicon-bar"></span>
        </button>
        <a class="navbar-brand">
            表单布局
        </a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav" id="menu-layoutit">
            <li>
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" id="save" class="active btn btn-xs btn-primary"><i
                            class="glyphicon glyphicon-save"></i>
                        保存
                    </button>
                    <button type="button" class="btn btn-xs btn-primary" id="clear">
                        <i class="glyphicon-trash glyphicon"></i>
                        清空
                    </button>
                </div>
            </li>
        </ul>
    </div>
    <!--/.navbar-collapse -->
</div>
<!--/.navbar-fixed-top -->

<div class="container">
    <div class="row">
        <div class="">
            <div class="sidebar-nav">

                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <div class="pull-right popover-info">
                            <i class="glyphicon glyphicon-question-sign"></i>
                            <div class="popover fade right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">帮助</h3>
                                <div class="popover-content">
                                    在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值
                                </div>
                            </div>
                        </div>
                        <i class="glyphicon-plus glyphicon"></i>
                        布局设置
                    </li>
                    <li class="rows" id="estRows">

                        <div class="lyrow ui-draggable">
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon-remove glyphicon"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
								拖动
							</span>
                            <div class="preview">
                                <input type="text" value="12" class="form-control"></div>
                            <div class="view">
                                <div class="row clearfix">
                                    <div class="col-md-12 column"></div>
                                </div>
                            </div>
                        </div>

                        <div class="lyrow ui-draggable">
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon-remove glyphicon"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
								拖动
							</span>
                            <div class="preview">
                                <input type="text" value="6 6" class="form-control"></div>
                            <div class="view">
                                <div class="row clearfix">
                                    <div class="col-md-6 column"></div>
                                    <div class="col-md-6 column"></div>
                                </div>
                            </div>
                        </div>

                        <div class="lyrow ui-draggable">
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon-remove glyphicon"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
								拖动
							</span>
                            <div class="preview">
                                <input type="text" value="8 4" class="form-control"></div>
                            <div class="view">
                                <div class="row clearfix">
                                    <div class="col-md-8 column"></div>
                                    <div class="col-md-4 column"></div>
                                </div>
                            </div>
                        </div>

                        <div class="lyrow ui-draggable">
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon-remove glyphicon"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
							</span>
                            <div class="preview">
                                <input type="text" value="4 4 4" class="form-control"></div>
                            <div class="view">
                                <div class="row clearfix">
                                    <div class="col-md-4 column"></div>
                                    <div class="col-md-4 column"></div>
                                    <div class="col-md-4 column"></div>
                                </div>
                            </div>
                        </div>

                        <div class="lyrow ui-draggable">
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon-remove glyphicon"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
								拖动
							</span>
                            <div class="preview">
                                <input type="text" value="2 6 4" class="form-control"></div>
                            <div class="view">
                                <div class="row clearfix">
                                    <div class="col-md-2 column"></div>
                                    <div class="col-md-6 column"></div>
                                    <div class="col-md-4 column"></div>
                                </div>
                            </div>
                        </div>

                    </li>
                </ul>
                <input type="input" id="search" style="width: 150px!important;">
                <ul class="nav nav-list accordion-group">
                    <li class="nav-header">
                        <i class="glyphicon glyphicon-plus"></i>
                        字典
                        <div class="pull-right popover-info">
                            <i class="glyphicon glyphicon-question-sign "></i>
                            <div class="popover fade right">
                                <div class="arrow"></div>
                                <h3 class="popover-title">帮助</h3>
                                <div class="popover-content">
                                    将组件元素拖放入你需要放入的栅格列中.
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="boxes" id="elmBase">
                        <div  th:each="dict : ${dictList}" class="box box-element ui-draggable" >
                            <a href="#" class="remove label label-danger">
                                <i class="glyphicon glyphicon-remove"></i>
                                删除
                            </a>
                            <span class="drag label label-default">
								<i class="glyphicon glyphicon-move"></i>
								拖动
							</span>
                            <div th:text="${dict.dictTitle}" class="preview"></div>
                            <div  class="view"><label th:text="${dict.dictTitle}" th:data-id="${dict.dictId}"></label></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--/span-->
        <div class="demo ui-sortable" style="min-height: 155px;">
            <div th:each="rows:${root}" class="lyrow">

                    <a href="#" class="remove label label-danger">
                        <i class="glyphicon glyphicon-remove"></i>
                        删除
                    </a>
                    <span class="drag label label-default">
				        <i class="glyphicon glyphicon-move"></i>
				        拖动
			        </span>

                    <div class="preview">9 3</div>
                    <div class="view">
                        <div class="row clearfix">
                            <div th:each="columns:${rows.childrens}" th:class="${#strings.concat(columns.cellStyle,' column ui-sortable ')}">

                                <div class="box box-element ui-draggable" style="display: block;" th:each="cell:${columns.childrens}" >
                                    <a href="#" class="remove label label-danger">
                                        <i class="glyphicon glyphicon-remove"></i>
                                        删除
                                    </a>
                                    <span class="drag label label-default">
								        <i class="glyphicon glyphicon-move"></i>
								        拖动
							        </span>
                                    <div class="preview" th:text="${cell.dict.dictTitle}"></div>
                                    <div class="view"><label th:text="${cell.dict.dictTitle}" th:data-id="${cell.dict.dictId}"></label></div>
                                </div>
                            </div>

                        </div>
                    </div>
            </div>
        </div>
        <!--/span-->
        <div id="download-layout">
            <div id="layoutHtml">

            </div>
        </div>
    </div>
    <!--/row-->
    <script th:inline="javascript">
        var ctx = [[@{/}]];
        $(document).ready(function () {
            $("#save").on('click', function () {
                downloadLayoutSrc();
                var rows=[]
                $("#layoutHtml > .row").each(function(i,obj){
                    var row=[];
                    $(obj).children().each(function(j,objJ){
                        var column={};
                        column.style=$(objJ).attr("class").split(" ")[0];
                        row.push(column);
                        var dicts=[];
                        $(objJ).children().each(function(k,objK){
                            dicts.push($(objK).attr("data-id"))
                        })
                        column.dicts=dicts;
                    })
                    rows.push(row);
                });
                $.ajax({
                    url: "/form/display/saveCell",
                    type: "post",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    data: JSON.stringify({rows:rows,versionId:$("#versionId").val()}),
                    success: function(result) {
                        if(result.code==0){
                            alert("保存成功")
                        }else{
                            alert("保存失败:"+result.msg)
                        }
                    }
                })
            })
            $("#search").keydown(
                function(e){
                    if(e.keyCode==13) {
                        val=$.trim($(this).val());
                        if(val.length>0){
                            $(".boxes > .box > .preview").parent().hide()
                            $(".boxes > .box > .preview:contains('"+val+"')").parent().show()
                        }else{
                            $(".preview").parent().show()
                        }
                    }
                }

            )
        });
    </script>
</div>
<!--/.fluid-container-->
</body>
</html>